import React from 'react'; 
import FolderTree from "./FolderTree";
    var DocumentItem = React.createClass({
        getInitialState: function() {           
            var node = this.props.node;           
            return {              
                selected: false             
            };
        },
        clickAddPath: function(){
            var _this = this;
            var modal = UCX_Utils.modal("filing-to-modal", {
                showCallback : function(){
                    createFolderTree($("#filing-to-modal .model-nav-list-box")[0], 
                            {
                                style: 'tree-plus-minus',
                                id: 'filling-to-tree',
                                singleSelect: false,
                                enableSelect: true
                            });
                },
                hideCallback: function(){
                    distoryFolderTree($("#filing-to-modal .model-nav-list-box")[0]);
                },
                okCallback: function(){
                    var selectedNode = $("#filling-to-tree").data("getSelectedNode")();               
                    if (selectedNode.length > 0) {     
                        _this.addPath(selectedNode);                                     
                        modal.hide();           
                    }
                }
            }).show();    
        },
        addPath: function(selectedFolder){
            var _this = this;
            this.props.node.path = [];
            _.each(selectedFolder, function(folder){
                _this.props.node.path.push({id: folder.id, path: folder.path});
            });                      
            this.forceUpdate(); 
        },
        triggerSelected: function(event){  
            this.setState({selected : !this.state.selected});       
        },
        selected : function(bSel){
            this.setState({selected : bSel});      
        },
        componentWillUnmount: function(){
            this.selected(false);
        },       
        render: function(){            
            var node = this.props.node;           
            var selectedNode = node.path;          
            var path = [];
            var _this = this;
            
            if (!selectedNode){
                path.push(<p key={'addpath'} style={{margin:0}}>&nbsp;<a href="javascript:void(0)" onClick={this.clickAddPath} className="fa fa-plus-square-o"></a></p>)
            }
            else{
                selectedNode.forEach(function(node, i){
                    if (i == selectedNode.length - 1)  {
                        path.push(<p key={node.id} style={{margin:0}}>{node.path}&nbsp;<a href="javascript:void(0)" onClick={_this.clickAddPath} className="fa fa-plus-square-o"></a></p>);
                    }  
                    else{
                        path.push(<p key={node.id}  style={{margin:0}}>{node.path} </p>); 
                    }
                })
            }
          
            return (
                <tr>
                <td><input type="checkbox" onChange={this.triggerSelected} checked={this.state.selected} value=""></input></td>
                <td>{node.time}</td>
                <td>{node.owner}</td>
                <td>{node.name}</td>
                <td>{path}
                </td>
                <td className="text-center">
                    <a className="fa fa-pencil"></a>
                </td>
                </tr>
           )
        }
    });

export default React.createClass({     
        getInitialState: function () {
            return {
                selectedDocument : {}
            };
        },        
        componentDidMount: function() {
            var _this = this;           
            $(ReactDOM.findDOMNode(this)).data("getSelectedDocument", function(){    
                var ret = [];
                _.each(_this.refs, function(nodeItem) {
                    if (nodeItem.state.selected){
                       ret.push(nodeItem.props.node);
                    }
                });         
                return ret;                          
            });

            var $element = $(ReactDOM.findDOMNode(this));
            $element.find("tbody tr td input:checkbox").on('change', function() {             
                var length = $element.find("tbody tr td input:checked").length;
                if (length == 0){
                    $element.find("#checkAll").attr("checked", false);
                }
                if (length == _this.props.data.length){
                    $element.find("#checkAll").attr("checked", true);
                }
            });
        },
        componentWillUnmount: function() {
            $('#filing-to-modal').off('click', '.btn-warning', this.onAddPath); 
        },
        componentWillReceiveProps: function(nextProps) {        
            $(ReactDOM.findDOMNode(this)).find("#checkAll").attr("checked", false);
            _.each(this.state.selectedDocument, function(selectedItem){
                selectedItem.triggerSelected(null, false);
            })
        },
        checkAll: function(e) {                
            _.each(this.refs, function(value){
               value.triggerSelected(null, $(e.target).is(':checked'));
            })            
        },
        addSelectedDocument: function(selectedItem){         
            this.state.selectedDocument[selectedItem.props.node.id] = selectedItem;
        },
        removeSelectedDocument: function(node){
            delete this.state.selectedDocument[selectedItem.props.node.id];
        },
        render: function () {
            var data = this.props.data; 
            var header = [];      
            var body = [];
            header = (
                <tr key={'header'}><th><input id="checkAll" onChange={this.checkAll} type="checkbox" value=""></input></th><th>提交日期</th><th>提交者</th><th>文档名称</th><th>归档位置</th><th className="text-center">文档标引</th></tr>
                )
            if (data) {
                var _this = this;
                _.each(data, function (node) {                   
                    body.push(<DocumentItem key={node.id} ref={node.id} node={node}  documentList={_this}></DocumentItem>)                   
                });
            }          
            var table = (
                <table className = "table table-striped scroll_auto_y">
                 <thead>{header}</thead>
                 <tbody>{body}</tbody>             
                </table>
                )    
            return (
                <div id="unfilingDocument" className = "table-responsive">            
                    {table}
                </div>
            )
        }
});
  